<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006-2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Spry Shake Effect Sample</title>
	<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
	<script  src="../../includes/SpryEffects.js" type="text/javascript" > </script>
	<style type="text/css">
		.demoDiv{
			background-color: #CCC; 
			height: 150px; 
			overflow: hidden;
		}
		.animationContainer{
			height: 160px;
		}
		img{
			position: relative; 
			left: 300px;
			width: 298px;
			height: 214px;
		}
	</style>
</head>
<body>
	<h3>Spry Shake Effect samples</h3>
	<hr />
	
<!--

		Example 1: The default behaviour for Shake effect

-->

<p>
	The Shake will  move the element to left and right by 20px 6 times. The default duration is 0.5 seconds.</p>

<form method="get" action="shake_sample.html">
	<input type="button" onclick="first_example.start();" value="Shake Example 1" />
</form>
<br />

<div class="animationContainer">
	<div class="demoDiv" id="example1">
		<h4>Example 1</h4>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>

<script type="text/javascript">
	var first_example = new Spry.Effect.Shake('example1');
</script>
<hr />

<!--

		Example 2: Using the duration option for the Shake

-->
<p><strong>Duration</strong></p>
<p>
	The Shake effect allow you to specify a value for the &quot;duration&quot; through its constructor options 
	which will increase the number of times the element will move both sides. The value is set in milliseconds.
</p>
<p>
	The div element in this example will shake for 2 seconds.
</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
   var second_example = new Spry.Effect.Shake('example2', {duration: 2000});
&lt;/script&gt; </pre>
<form method="get" action="shake_sample.html">
	<input type="button" onclick="second_example.start();" value="Shake Example 2" />
</form>
<br />

<div class="animationContainer">
	<div class="demoDiv" id="example2">
		<h4>Example 2</h4>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>

<script type="text/javascript">
	var second_example = new Spry.Effect.Shake('example2', {duration: 2000});
</script>
	
<hr />
</body>
</html>
